<template>
  <div class="main-content">
    <h3>课程列表</h3>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="发布日期"
        width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="课程标题"
        width="180">
        <template slot-scope="scope">
          <i class="el-icon-notebook-2"></i>
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="讲师"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
<!--            讲师名称和部门-->
<!--            <p>姓名: {{ scope.row.teacher }}</p>-->
<!--            <p>部门: {{ scope.row.department }}</p>-->
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.teacher ? scope.row.teacher : '无'}}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="课程价格">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="发布状态">
        <template slot-scope="scope">
          <span v-if="scope.row.draft === 0" style="color: #E6A23C">未发布</span>
          <span v-else style="color: #67C23A">已发布</span>
        </template>
      </el-table-column>
      <el-table-column
          label="购买人数">
        <template slot-scope="scope">
          <span>{{scope.row.count}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import subject from "../../../../api/subject";
  export default {
    name: "SubjectList",
    mounted() {
      this.getSubjectInfo()
    },
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      //获取所有课程信息内容
      getSubjectInfo(){
        subject.getSubjectInfos()
        .then(resp => {
          // console.log(resp.data.subjectList)

          this.tableData = resp.data.subjectList
        })
        .catch(err => {
          console.log(err)
        })
      },


      //编辑按钮事件
      handleEdit(row) {
        console.log(row);
      },
      handleDelete(subjectId) {
        this.$msgbox.confirm('此操作将会删除课程的所有信息,继续吗?','警告',{
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'danger'
        }).then(() => { //确认
          subject.dropSubject(subjectId)
          .then(() => {
            this.$message.success('课程信息已删除')
            this.getSubjectInfo()
          }).catch(err => {
            console.log(err)
            this.$message.error('课程删除失败')
          })
        }).catch(() => {
          this.$message.info('取消删除')
        })
      }
    }
  }
</script>

<style scoped>
  .main-content{
    padding: 0 36px;
  }
</style>
